<template>
  <el-descriptions
    class="global-descriptions"
    title="基本信息"
    border
    :column="1"
  >
    <el-descriptions-item label="渠道商">
      <ProfilePanel
        v-if="detailData"
        :avatar="detailData.avatar"
        :nickname="detailData.nickname"
      />
    </el-descriptions-item>
    <el-descriptions-item label="备注">
      <el-button
        type="primary"
        link
        :loading="loadData.update"
        @click="handleClickBindRemark"
      >
        {{ detailData?.remark || '设置备注' }}
      </el-button>
    </el-descriptions-item>
    <el-descriptions-item label="手机号">
      <el-button
        type="primary"
        link
        :loading="loadData.update"
        @click="handleClickBindMobile"
      >
        {{ detailData?.mobile || '绑定手机号' }}
      </el-button>
    </el-descriptions-item>
    <el-descriptions-item label="真实姓名">
      <el-button
        type="primary"
        link
        :loading="loadData.update"
        @click="handleClickBindRealname"
      >
        {{ detailData?.realname || '设置真实姓名' }}
      </el-button>
    </el-descriptions-item>
    <el-descriptions-item label="微信号">
      <el-button
        type="primary"
        link
        :loading="loadData.update"
        @click="handleClickBindWexin"
      >
        {{ detailData?.weixin || '设置微信号' }}
      </el-button>
    </el-descriptions-item>
    <el-descriptions-item label="邀请码">
      <el-button
        v-if="!detailData?.uniqueCode"
        type="primary"
        link
        :loading="loadData.unique"
        @click="handleClickCreateUniqueCode"
      >
        申请邀请码
      </el-button>
      <template v-else>
        {{ detailData?.uniqueCode }}
      </template>
    </el-descriptions-item>
    <el-descriptions-item label="状态">
      <PipeTags type="user" :state="detailData?.state" />
    </el-descriptions-item>
    <el-descriptions-item label="创建时间">
      <PipeDatetime :value="detailData?.createTime || ''" />
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="会员余额"
    border
    :column="1"
    style="margin-top: 16px"
  >
    <el-descriptions-item label="佣金（剩余佣金）">
      <PipeMoney type="1" :money="detailData?.bonus" />
    </el-descriptions-item>
    <el-descriptions-item label="佣金（冻结佣金）">
      <PipeMoney type="1" :money="detailData?.bonusFreeze" />
    </el-descriptions-item>
    <el-descriptions-item label="佣金（累计佣金）">
      <PipeMoney type="1" :money="detailData?.bonusTotal" />
    </el-descriptions-item>
    <el-descriptions-item label="积分（剩余积分）">
      <PipeMoney type="2" :money="detailData?.credits" />
    </el-descriptions-item>
    <el-descriptions-item label="积分（冻结积分）">
      <PipeMoney type="2" :money="detailData?.creditsFreeze" />
    </el-descriptions-item>
    <el-descriptions-item label="积分（累计积分）">
      <PipeMoney type="2" :money="detailData?.creditsTotal" />
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="会员编码"
    border
    :column="1"
    style="margin-top: 16px"
  >
    <el-descriptions-item label="OwnID">
      {{ detailData?.ownId }}
    </el-descriptions-item>
    <el-descriptions-item label="OpenID">
      {{ detailData?.openId }}
    </el-descriptions-item>
    <el-descriptions-item label="UnionID">
      {{ detailData?.unionId }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { PropType, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { updateUsers, createUniqueCode } from '@/apis/users';

// props
const props = defineProps({
  rowData: {
    // type: Object as PropType<TempsPost>,
    type: Object as PropType<API.user.EntitySchema>,
    default: () => ({})
  },

  detailData: {
    // type: Object as PropType<TempsPost>,
    type: Object as PropType<API.user.EntitySchema>,
    default: () => ({})
  }
});

// emits
const emits = defineEmits(['onRefresh']);

// 加载状态
// const isLoading = ref(false);
const loadData = reactive({
  detail: false,
  update: false,
  unique: false
});

// btn - bind mobile
const handleClickBindMobile = () => {
  ElMessageBox.prompt('请输入会员手机号', '提示', {
    confirmButtonText: '绑定',
    cancelButtonText: '取消',
    inputValue: props.detailData?.mobile ?? ''
  })
    .then(({ value }) => {
      // 绑定
      submitUpdateUser({ mobile: value });
    })
    .catch(() => {});
};

// btn - bind realname
const handleClickBindRealname = () => {
  ElMessageBox.prompt('请输入会员姓名', '提示', {
    confirmButtonText: '设置',
    cancelButtonText: '取消',
    inputValue: props.detailData?.realname ?? ''
  })
    .then(({ value }) => {
      // 绑定
      submitUpdateUser({ realname: value });
    })
    .catch(() => {});
};

// btn - bind remark
const handleClickBindRemark = () => {
  ElMessageBox.prompt('请输入备注', '提示', {
    confirmButtonText: '设置',
    cancelButtonText: '取消',
    inputValue: props.detailData?.remark ?? ''
  })
    .then(({ value }) => {
      // 绑定
      submitUpdateUser({ remark: value });
    })
    .catch(() => {});
};

// btn - bind weixin
const handleClickBindWexin = () => {
  ElMessageBox.prompt('请输入微信号', '提示', {
    confirmButtonText: '设置',
    cancelButtonText: '取消',
    inputValue: props.detailData?.weixin ?? ''
  })
    .then(({ value }) => {
      // 绑定
      submitUpdateUser({ weixin: value });
    })
    .catch(() => {});
};

// btn - create unique code
const handleClickCreateUniqueCode = () => {
  submitCreateUniqueCode();
};

// 创建邀请码
const submitCreateUniqueCode = () => {
  loadData.unique = true;
  createUniqueCode(props.rowData.ownId!)
    .then(() => {
      loadData.unique = false;
      ElMessage.success('生成成功');
      // 刷新数据
      emits('onRefresh');
    })
    .catch(() => {
      loadData.unique = false;
    });
};

// 更新用户信息
const submitUpdateUser = (dataOpt: API.user.EntityDto) => {
  loadData.update = true;
  updateUsers(props.rowData.ownId!, dataOpt)
    .then(() => {
      loadData.update = false;
      ElMessage.success('绑定成功');
      // 刷新数据
      emits('onRefresh');
    })
    .catch(() => {
      loadData.update = false;
    });
};
</script>

<style lang="scss" scoped></style>
